<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>营销管理</el-breadcrumb-item>
      <el-breadcrumb-item>场景营销</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">场景营销</h3>
      <el-form :inline="true" class="demo-form-inline" style="text-align: left" ref="searchbox">
        <el-form-item label="活动名称">
          <el-input v-model="name" placeholder="请输入名称"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="status" placeholder="请选择状态">
            <!--                <el-option label="全部" value="3"></el-option>-->
            <el-option label="已激活" value="1"></el-option>
            <el-option label="已终止" value="0"></el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="会员等级">
          <el-input v-model="svipId" :disabled="true"></el-input>
        </el-form-item>


        <el-row :gutter="20">
          <el-col :span="20">
            <el-row style="margin-bottom: 20px;text-align: left">
              <span style="padding: 10px">付费会员等级</span>
              <el-button plain @click="doSearch(0)">不限</el-button>
              <el-button plain v-for="item in svipList" :key="item.id" @click="doSearch(item.id)">{{
                  item.name
                }}
              </el-button>
              <el-button style="margin-left: 50px" type="primary" @click="search">查询</el-button>
              <el-button @click="resetBox">重置</el-button>
            </el-row>

          </el-col>
        </el-row>


      </el-form>
    </el-card>


    <el-card style="margin-top: 30px">

      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">场景营销活动
        <div style="float: right;margin-right: 30px;">
          <el-button type="primary" size="mini" @click="showAdd">新建</el-button>
        </div>
      </h3>
      <el-table :data="BirthdayVoList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="活动名称" prop="name"></el-table-column>

        <el-table-column label="活动状态" prop="status">
          <template slot-scope="scope">

            <b style="color:#3cb371" v-show="scope.row.status==1">{{ caseStatusArr[1] }}</b>
            <b style="color:#ff0000" v-show="scope.row.status==0">{{ caseStatusArr[0] }}</b>
          </template>
        </el-table-column>

        <el-table-column label="赠送优惠券" prop="list1">
          <template slot-scope="scope">
            <b v-for="item in scope.row.list1" v-html="item.couponname+'<p>'">
              <hr/>
            </b>
          </template>
        </el-table-column>

        <el-table-column label="适用会员等级" prop="list">
          <template slot-scope="scope">
            <b v-for="item in scope.row.list" v-html="item.name+'<p>'">
              <hr/>
            </b>
          </template>
        </el-table-column>


        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showChange(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="showData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10 , 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>

    <!-- 新增模态框-->
    <el-dialog title="添加满赠" :visible.sync="addDialogVisible" width="50%" @close="cancelAdd">
      <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addBirthFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="活动名称:" prop="name" placeholder="请输入优惠券名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>


        <el-form-item label="适用付费会员等级">
          <el-select v-model="svipIds" multiple placeholder="请选择适用的等级">

            <el-option :label="item.name" :value="item.id" v-for="item in svipList" :key="item.id"></el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="赠送优惠券">
          <!--            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
                        适用商品列表

                      </h3>-->
          <el-button type="primary" style="float: right" size="mini" @click="showCoupon()">选择赠送的优惠券</el-button>
          <!--
                      <el-table :data="addList"  border stripe>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column label="商品封面">
                          <template slot-scope="scope">
                            <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
                          </template>

                        </el-table-column>
                        <el-table-column label="商品名称" prop="commodityname"></el-table-column>
                        <el-table-column label="商品名称" prop="commodityprice"></el-table-column>

                        <el-table-column label="商品赠送数量">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.num"></el-input>
                          </template>
                        </el-table-column>
                      </el-table>-->

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doAdd">确 定</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </span>
    </el-dialog>


    <!--新增场景--选择优惠券的模态框-->
    <el-dialog title="选择优惠券" :visible.sync="addDialogVisible1" width="50%">
      <el-card>
        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">优惠券查询</h3>
        <!--          <el-row :gutter="20">
                    <el-col :span="8">
                      <el-input placeholder="请输入优惠券名称" clearable v-model="couponname" @clear="searchCoupon">
                        <el-button slot="append" icon="el-icon-search" @click="searchCoupon"></el-button>
                      </el-input>
                    </el-col>
                  </el-row>-->

        <el-form :inline="true" class="demo-form-inline" style="text-align: left" ref="searchbox">
          <el-form-item label="优惠卷名称">
            <el-input v-model="couponName" placeholder="请输入标签名称"></el-input>
          </el-form-item>
          <el-form-item label="优惠券类型">
            <el-select v-model="typeId" placeholder="请选择优惠券类型">
              <el-option :label="item.coupontypename" :value="item.id" v-for="item in couponTypeList"
                         :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用渠道">
            <el-select v-model="channel" placeholder="请选择适用渠道">
              <el-option label="全部" value="0"></el-option>
              <el-option label="微信商城" value="1"></el-option>
              <el-option label="APP商城" value="2"></el-option>
              <el-option label="线下店铺" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="status1" placeholder="请选择优惠券状态">
              <el-option label="全部" value="0"></el-option>
              <el-option label="未开始" value="1"></el-option>
              <el-option label="进行中" value="2"></el-option>
              <el-option label="已结束" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchCoupon">查询</el-button>
            <el-button @click="resetBox1">重置</el-button>
          </el-form-item>
        </el-form>


      </el-card>
      <el-card style="margin-top: 30px">

        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">优惠卷列表

        </h3>
        <el-table :data="CouponVoList" @selection-change="idChance" border stripe ref="multipleTable">
          <el-table-column type="selection" width="60"></el-table-column>
          <el-table-column type="index"></el-table-column>
          <el-table-column label="优惠券名称" prop="couponname"></el-table-column>
          <el-table-column label="优惠券类型" prop="couponType.coupontypename"></el-table-column>
          <el-table-column label="使用范围">全场通用</el-table-column>
          <el-table-column label="优惠券状态" prop="status">
            <template slot-scope="scope">
              <b style="color:#0000ff" v-show="scope.row.status==1">{{ caseStatusArr1[1] }}</b>
              <b style="color:#3cb371" v-show="scope.row.status==2">{{ caseStatusArr1[2] }}</b>
              <b style="color:#ff0000" v-show="scope.row.status==3">{{ caseStatusArr1[3] }}</b>
            </template>
          </el-table-column>
          <el-table-column label="适用渠道" prop="channel">
            <template slot-scope="scope">
              <b v-show="scope.row.channel==1">微信商城</b>
              <b v-show="scope.row.channel==2">APP商城</b>
              <b v-show="scope.row.channel==3">线下商铺</b>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" prop="effectivetimestart"></el-table-column>
          <el-table-column label="结束时间" prop="effectivetimeend"></el-table-column>

        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10 , 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>

      </el-card>
      <el-button type="primary" @click="doAdd0">确 定</el-button>
      <el-button type="primary" @click="addDialogVisible1 = false">取消</el-button>
    </el-dialog>


    <!--场景修改的模态框-->

    <el-dialog title="修改满赠" :visible.sync="changeDialogVisible" width="50%" @close="canceledit">
      <el-form
          :model="changeForm"
          :rules="changeFormRules"
          ref="addUserFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="活动名称:" prop="name" placeholder="请输入优惠券名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>


        <el-form-item label="适用付费会员等级">
          <el-select v-model="changeSvipIds" multiple placeholder="请选择适用的等级">
            <el-option :label="item.name" :value="item.id" v-for="item in svipList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="满赠商品">
            <el-button type="primary" style="float: right" size="mini" @click="showEditCoupon()">选择赠送优惠券</el-button>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doChange">确 定</el-button>
        <el-button @click="cancelChange">取 消</el-button>
      </span>
    </el-dialog>

              <!--修改  优惠券的模态框-->
    <el-dialog title="选择优惠券" :visible.sync="changeDialogVisible1" width="50%">
      <el-card>
        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">优惠券查询</h3>
        <el-form :inline="true" class="demo-form-inline" style="text-align: left" ref="searchbox">
          <el-form-item label="优惠卷名称">
            <el-input v-model="couponName" placeholder="请输入标签名称"></el-input>
          </el-form-item>
          <el-form-item label="优惠券类型">
            <el-select v-model="typeId" placeholder="请选择优惠券类型">
              <el-option :label="item.coupontypename" :value="item.id" v-for="item in couponTypeList"
                         :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用渠道">
            <el-select v-model="channel" placeholder="请选择适用渠道">
              <el-option label="全部" value="0"></el-option>
              <el-option label="微信商城" value="1"></el-option>
              <el-option label="APP商城" value="2"></el-option>
              <el-option label="线下店铺" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="status1" placeholder="请选择优惠券状态">
              <el-option label="全部" value="0"></el-option>
              <el-option label="未开始" value="1"></el-option>
              <el-option label="进行中" value="2"></el-option>
              <el-option label="已结束" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchCoupon">查询</el-button>
            <el-button @click="resetBox1">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="margin-top: 30px">



          <el-table :data="CouponVoList" @selection-change="idChance" border stripe ref="multipleTable1">
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column label="优惠券名称" prop="couponname"></el-table-column>
            <el-table-column label="优惠券类型" prop="couponType.coupontypename"></el-table-column>
            <el-table-column label="使用范围">全场通用</el-table-column>
            <el-table-column label="优惠券状态" prop="status">
              <template slot-scope="scope">
                <b style="color:#0000ff" v-show="scope.row.status==1">{{ caseStatusArr1[1] }}</b>
                <b style="color:#3cb371" v-show="scope.row.status==2">{{ caseStatusArr1[2] }}</b>
                <b style="color:#ff0000" v-show="scope.row.status==3">{{ caseStatusArr1[3] }}</b>
              </template>
            </el-table-column>
            <el-table-column label="适用渠道" prop="channel">
              <template slot-scope="scope">
                <b v-show="scope.row.channel==1">微信商城</b>
                <b v-show="scope.row.channel==2">APP商城</b>
                <b v-show="scope.row.channel==3">线下商铺</b>
              </template>
            </el-table-column>
            <el-table-column label="开始时间" prop="effectivetimestart"></el-table-column>
            <el-table-column label="结束时间" prop="effectivetimeend"></el-table-column>

          </el-table>
          <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="pageNum1"
              :page-sizes="[5, 10 , 15, 20]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1"
          ></el-pagination>



      </el-card>
      <el-button type="primary" @click="doChange0()">确 定</el-button>
      <el-button type="primary" @click="changeDialogVisible1 = false">取消</el-button>
    </el-dialog>


  </div>
</template>
<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      name: '',
      typeId: '',
      channel: '',
      status: '',
      status1: '',
      couponName: '',
      svipId: '',
      caseStatusArr: {
        1: "已激活",
        0: "已终止",
      },
      caseStatusArr1: {
        1: "未开始",
        2: "进行中",
        3: "已结束",
      },
      BirthdayVoList: [],
      svipList: [],
      CouponVoList: [],//所有优惠券列表
      couponname: '',//搜索优惠券的优惠券名
      couponTypeList: [],
      readyList: [],//查询优惠券模态框中 选中的优惠券


      //新增
      addDialogVisible: false,
      addDialogVisible1: false,//新增优惠券的模态框
      addForm: {
        name: '',
        status: 1,
        list: [],
        list1: [],
      },
      addFormRules: {},
      svipIds: [],//新增--选中的付费会员id
      addSvipList: [],
      addList: [],//新增优惠券的ids


      //修改
      pageNum1: 1,
      pageSize1: 10,
      total1: 0,//查询优惠券分页
      changeDialogVisible: false,
      changeDialogVisible1: false,//修改优惠券的模态框
      changeForm: {
        name: '',
        status: 1,
        list: [],
        list1: [],
      },
      changeFormRules: {},
      changeSvipIds: [],
      changeSvipList: [],
      changeList: [],


    };
  },
  methods: {

    //删除
    showData(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url ="bir/del/"+id;
        this.$axios.delete(url).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
              duration: 1000
            })
            this.reloadData();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //搜索选择VIP等级
    doSearch(id) {
      this.svipId = id;
    },
    //场景搜索重置
    resetBox() {
      this.name = '';
      this.status = '';
      this.svipId = '';
      this.search();
    },


    /* =================================================================*/
    //打开添加窗口
    showAdd() {
      this.addDialogVisible = true;
    },
    //关闭添加窗口
    cancelAdd() {
      this.addDialogVisible = false;
      this.$refs.addBirthFormRef.resetFields();
    },
    //选中的优惠券ids
    idChance(selection) {
      this.readyList = [];
      for (let o of selection) {
        this.readyList.push(o);
      }
    },
    //选中的优惠券ids进行转移
    doAdd0() {
      this.addList = this.readyList;
      this.addDialogVisible1 = false;
    },

    //得到所有优惠券类型
    getCouponType() {
      let url = "couponType/showAll";
      this.$axios.get(url).then(res => {
        this.couponTypeList = res.data.data;
      })
    },
    //优惠券
    showCoupon() {
      this.addDialogVisible1 = true;
      this.$nextTick(() => {
        for (let com of this.addList) {
          this.CouponVoList.forEach((item, index) => {
            if (com.id === item.id) {
              this.$refs.multipleTable.toggleRowSelection(this.CouponVoList[index], true)
            }
          })
        }
      })
    },

    //搜索优惠券重置
    resetBox1() {
      this.typeId = "";
      this.name = "";
      this.channel = "";
      this.status = "";
      this.getCoupon();
    },
    //搜索优惠券
    searchCoupon() {
      this.pageNum1 = 1;
      this.getCoupon();
    },
    //优惠券分页
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.reloadData();
    },
    //优惠券分页
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.reloadData();
    },
    //得到所有优惠券
    getCoupon() {
      let url = "coupon/showCoupon";
      this.$axios.get(url, {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          name: this.name,
          typeId: this.typeId,
          channel: this.channel,
          status: this.status1,
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.CouponVoList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;

        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },


    //添加
    doAdd() {
      this.svipIds.forEach(((value, index) => {
        this.addSvipList.push(
            {
              id: value
            }
        );
      }))
      this.addForm.list = this.addSvipList;
      this.addForm.list1 = this.addList;
      let url = "bir/add";
      this.$axios.post(url, this.addForm).then(res => {
        if (res.data.code == 200) {

          this.addForm = {};
          this.value1 = [];
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000
          })

          this.addSvipList = [];
          this.addForm = {};
          this.addList = [];
          this.svipIds = [];
          this.reloadData();
          this.addDialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })

    },
    //关闭修改模态框
    canceledit(){
      this.changeDialogVisible = false;
      this.reloadData();
    },
    //打开修改模态框
    showChange(obj) {
      this.changeDialogVisible = true;
      this.changeForm = obj;
      this.changeSvipIds = [];
      this.changeForm.list.forEach(value => {
        this.changeSvipIds.push(value.id);
      })
      this.changeList = this.changeForm.list1;
    },
    // 修改>>> 优惠券查询分页
    handleSizeChange1(newSize) {
      this.pageSize1 = newSize;
      this.reloadData();
    },
    handleCurrentChange1(newPage) {
      this.pageNum1 = newPage;
      this.reloadData();
    },
    // 修改>>> 优惠券模态框关闭
    cancelChange() {
      this.changeDialogVisible = false;
      this.reloadData();
    },


    //修改>>>选择选中的优惠券id，转移储存
    doChange0() {
      this.changeList = this.readyList;
      this.changeDialogVisible1 = false;
    },
    //修改>>>选择选中的优惠券id
    showEditCoupon() {
      this.changeDialogVisible1 = true;
      this.$nextTick(() => {
        this.CouponVoList.forEach((item, index) => {
          this.$refs.multipleTable1.toggleRowSelection(this.CouponVoList[index], false)
        })

        for (let com of this.changeList) {
          this.CouponVoList.forEach((item, index) => {
            if (com.id === item.id) {
              this.$refs.multipleTable1.toggleRowSelection(this.CouponVoList[index], true)
            }
          })
        }
      })
    },
    //修改
    doChange() {
      this.changeSvipList = [];
      this.changeSvipIds.forEach(((value, index) => {
        this.changeSvipList.push(
            {
              id: value
            }
        );
      }))
      this.changeForm.list = this.changeSvipList;
      this.changeForm.list1 = this.changeList;
      let url = "bir/edit";
      this.$axios.put(url, this.changeForm).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000
          })
          this.reloadData();
          this.changeDialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })

    },




    //查所有活动
    search() {
      this.pageNum = 1;
      this.getBirthday();
    },
    //分页查所有活动
    getBirthday() {
      let url = "bir/showBir";
      this.$axios.get(url, {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          name: this.name,
          status: this.status,
          svipId: this.svipId
        }
      }).then(res => {
        if (res.data.code == 200) {

          this.BirthdayVoList = res.data.data.list;

          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    //查所有SVIP的对象
    getSvipList() {
      let url = "present/showSvipList";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.svipList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },

    reloadData() {
      this.getBirthday();
      this.getSvipList();
      this.getCoupon();
    }
  },
  created() {
    this.reloadData();

  }
};
</script>
<style lang="less" scoped>
</style>